<template>
  <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="姓名" prop="xsBd">
            <el-input v-model="queryParams.xsBd" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="证件号码" prop="zjhm">
            <el-input v-model="queryParams.zjhm" placeholder="请输入证件号码" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
          <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
      </el-form>

      <TableCard>
          <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                  <el-button type="info" plain icon="el-icon-upload2" size="mini" >导入</el-button>
              </el-col>
              <el-col :span="1.5">
                  <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" >
                      导出
                  </el-button>
              </el-col>
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>

          <el-table :border="Global.tableShowBorder" v-loading="loading" :data="communicateBookList">
              <el-table-column v-for="(item,index) in tableList" :key="index" :label="item.label" 
              align="center" :prop="item.prop" :width="item.width || (item.prop == 'czList' ? '' : '160px')" :fixed="item.fixed">
                <template slot-scope="{row}">
                    {{row[item.prop]}}
                </template>
              </el-table-column>
              <el-table-column  label="城镇企业职工基本养老保险费" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.czList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column  label="机关事业单位养老保险" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.jgList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column  label="失业保险费" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.syList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column  label="工伤保险费" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.gsList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column  label="职工基本医疗保险费" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.zgylList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column  label="职工基本医疗保险费（生育）" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.zgsyList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column  label="公务员医疗补助" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.gwyList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column  label="职业年金" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.njList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column  label="离休人员医疗保障" align="center">
                <el-table-column v-for="(item,index) in czList" :key="index" :label="item.label" 
                align="center" :prop="item.prop" width="160px">
                    <template slot-scope="{row}">
                        {{row.txList[item.prop]}}
                    </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="160px">
                  <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)" >
                        查看
                      </el-button>
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
                        删除
                      </el-button>
                  </template>
              </el-table-column>
          </el-table>

          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
      </TableCard>

      <!-- 添加或修改个人通讯录对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-row>
                  <el-col :span="item.span || 12" v-for="(item,index) in tableList1" :key="index">
                      <el-form-item :label="item.label" :prop="item.prop" v-if="item.span != 24">
                          <el-input v-model="form[item.prop]" :placeholder="`请输入${item.label}`"/>
                      </el-form-item>
                      <div v-else>
                        <h2>{{item.label}}</h2>
                        <el-col :span="item1.span || 12" v-for="(item1,index1) in item[item.prop]" :key="index1">
                            <el-form-item :label="item1.label" :prop="item1.prop" v-if="form[item.prop]">
                                <el-input v-model="form[item.prop][item1.prop]" :placeholder="`请输入${item1.label}`"/>
                            </el-form-item>
                        </el-col>
                      </div>
                  </el-col>
              </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
              <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
              <el-button @click="cancel">取 消</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import {
  listCommunicateBook,
  getCommunicateBook,
  delCommunicateBook,
  addCommunicateBook,
  updateCommunicateBook
} from "@/api/common/communicateBook";
import list from '@fullcalendar/list';
let czList =[
    {label:'缴费工资',prop:'gongzi',},{label:'缴费基数',prop:'jfjs',},{label:'单位应缴',prop:'dwyj',},{label:'减免金额',prop:'jmgz',},
    {label:'个人应缴',prop:'gryj',},{label:'本金合计',prop:'bjhj',},{label:'滞纳金',prop:'zdj',},{label:'利息',prop:'lixi',},
]
export default {
  name: "custoManag",
  data() {
      return {
          swList:[
            {label:'张祁阳',value:1,},{label:'王俊豪',value:4,},{label:'张军和',value:4,},
            {label:'王少奇',value:2,},{label:'黄杜娟',value:3,},
          ],
          tableList:[
            {label:'证件号码',prop:'zhengjian',fixed:'left',},{label:'姓名',prop:'name',fixed:'left',},{label:'学历',prop:'xueli',},
            {label:'参保人员身份',prop:'shenfen',},{label:'总金额',prop:'money',},{label:'单位缴费总金额',prop:'dwTotal',},
            {label:'个人缴费总金额',prop:'grTotal',},{label:'建账年月',prop:'year',},{label:'费款所属期起',prop:'ssStartTime',},
            {label:'费款所属期止',prop:'ssEndTime',},
          ],
          tableList1:[
            {label:'证件号码',prop:'zhengjian',fixed:'left',},{label:'姓名',prop:'name',fixed:'left',},{label:'学历',prop:'xueli',},
            {label:'参保人员身份',prop:'shenfen',},{label:'总金额',prop:'money',},{label:'单位缴费总金额',prop:'dwTotal',},
            {label:'个人缴费总金额',prop:'grTotal',},{label:'建账年月',prop:'year',},{label:'费款所属期起',prop:'ssStartTime',},
            {label:'费款所属期止',prop:'ssEndTime',},
            {label:'城镇企业职工基本养老保险费',prop:'czList',czList,span:24,},{label:'机关事业单位养老保险',prop:'jgList',jgList:czList,span:24,},{label:'失业保险费',prop:'syList',syList:czList,span:24,},
            {label:'工伤保险费',prop:'gsList',gsList:czList,span:24,},{label:'职工基本医疗保险费',prop:'zgylList',zgylList:czList,span:24,},{label:'职工基本医疗保险费（生育）',prop:'zgsyList',zgsyList:czList,span:24,},
            {label:'公务员医疗补助',prop:'gwyList',gwyList:czList,span:24,},{label:'职业年金',prop:'njList',njList:czList,span:24,},{label:'离休人员医疗保障',prop:'txList',txList:czList,span:24,},
          ],
          czList:[
                {label:'缴费工资',prop:'gongzi',},{label:'缴费基数',prop:'jfjs',},{label:'单位应缴',prop:'dwyj',},{label:'减免金额',prop:'jmgz',},
                {label:'个人应缴',prop:'gryj',},{label:'本金合计',prop:'bjhj',},{label:'滞纳金',prop:'zdj',},{label:'利息',prop:'lixi',},
            ],
          baseUrl: process.env.VUE_APP_BASE_API,
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 个人通讯录表格数据
          communicateBookList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
              pageNum: 1,
              pageSize: 20,
              orderByColumn: "createTime",
              isAsc: "descending",
              userId: null,
              avatar: null,
              name: null,
              birthDate: null,
              idNum: null,
              phone: null,
              email: null,
              companyName: null,
              companyAddress: null,
              address: null
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {
              name: [
                  {required: true, message: "姓名不能为空", trigger: "blur"}
              ],
          }
      };
  },
  created() {
      this.getList();
  },
  methods: {
      /** 查询个人通讯录列表 */
      getList() {
          this.communicateBookList = [
              {
                zhengjian:'350524198506102018',name:'吴志宏',xueli:'大专',shenfen:'108-外来工',money:'1241.71',
                dwTotal:'872.55',grTotal:'369.16',year:'2024-12',ssStartTime:'2024-12-01 ',ssEndTime:'2024-12-31 ',
                czList: { gongzi:'2030',jfjs:'3300',dwyj:'528',jmgz:'0', gryj:'264',bjhj:'792',zdj:'0',lixi:'0', },
                jgList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                syList: { gongzi:'2030',jfjs:'3300',dwyj:'16.5',jmgz:'0', gryj:'16.5',bjhj:'33',zdj:'0',lixi:'0', },
                gsList: { gongzi:'2030',jfjs:'4433',dwyj:'8.87',jmgz:'0', gryj:'8.87',bjhj:'0',zdj:'0',lixi:'0', },
                zgylList: { gongzi:'2030',jfjs:'4433',dwyj:'288.15',jmgz:'0', gryj:'88.66',bjhj:'376.81',zdj:'0',lixi:'0', },
                zgsyList: { gongzi:'2030',jfjs:'4433',dwyj:'31.03',jmgz:'0', gryj:'0',bjhj:'31.03',zdj:'0',lixi:'0', },
                gwyList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                njList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                txList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
              },
              {
                zhengjian:'35052519920414431X',name:'陈培水',xueli:'大专',shenfen:'108-外来工',money:'1241.71',
                dwTotal:'872.55',grTotal:'369.16',year:'2024-12',ssStartTime:'2024-12-01 ',ssEndTime:'2024-12-31 ',
                czList: { gongzi:'1800',jfjs:'3300',dwyj:'528',jmgz:'0', gryj:'264',bjhj:'792',zdj:'0',lixi:'0', },
                jgList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                syList: { gongzi:'1800',jfjs:'3300',dwyj:'16.5',jmgz:'0', gryj:'16.5',bjhj:'33',zdj:'0',lixi:'0', },
                gsList: { gongzi:'1800',jfjs:'4433',dwyj:'8.87',jmgz:'0', gryj:'8.87',bjhj:'0',zdj:'0',lixi:'0', },
                zgylList: { gongzi:'1800',jfjs:'4433',dwyj:'288.15',jmgz:'0', gryj:'88.66',bjhj:'376.81',zdj:'0',lixi:'0', },
                zgsyList: { gongzi:'1800',jfjs:'4433',dwyj:'31.03',jmgz:'0', gryj:'0',bjhj:'31.03',zdj:'0',lixi:'0', },
                gwyList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                njList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                txList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
              },
              {
                zhengjian:'350526199511057052',name:'郭树源',xueli:'大专',shenfen:'108-外来工',money:'1241.71',
                dwTotal:'872.55',grTotal:'369.16',year:'2024-12',ssStartTime:'2024-12-01 ',ssEndTime:'2024-12-31 ',
                czList: { gongzi:'2030',jfjs:'3300',dwyj:'528',jmgz:'0', gryj:'264',bjhj:'792',zdj:'0',lixi:'0', },
                jgList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                syList: { gongzi:'2030',jfjs:'3300',dwyj:'16.5',jmgz:'0', gryj:'16.5',bjhj:'33',zdj:'0',lixi:'0', },
                gsList: { gongzi:'2030',jfjs:'4433',dwyj:'8.87',jmgz:'0', gryj:'8.87',bjhj:'0',zdj:'0',lixi:'0', },
                zgylList: { gongzi:'2030',jfjs:'4433',dwyj:'288.15',jmgz:'0', gryj:'88.66',bjhj:'376.81',zdj:'0',lixi:'0', },
                zgsyList: { gongzi:'2030',jfjs:'4433',dwyj:'31.03',jmgz:'0', gryj:'0',bjhj:'31.03',zdj:'0',lixi:'0', },
                gwyList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                njList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                txList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
              },
              {
                zhengjian:'350581198811083543',name:'洪美华',xueli:'大专',shenfen:'108-外来工',money:'1241.71',
                dwTotal:'872.55',grTotal:'369.16',year:'2024-12',ssStartTime:'2024-12-01 ',ssEndTime:'2024-12-31 ',
                czList: { gongzi:'1800',jfjs:'3300',dwyj:'528',jmgz:'0', gryj:'264',bjhj:'792',zdj:'0',lixi:'0', },
                jgList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                syList: { gongzi:'1800',jfjs:'3300',dwyj:'16.5',jmgz:'0', gryj:'16.5',bjhj:'33',zdj:'0',lixi:'0', },
                gsList: { gongzi:'1800',jfjs:'4433',dwyj:'8.87',jmgz:'0', gryj:'8.87',bjhj:'0',zdj:'0',lixi:'0', },
                zgylList: { gongzi:'1800',jfjs:'4433',dwyj:'288.15',jmgz:'0', gryj:'88.66',bjhj:'376.81',zdj:'0',lixi:'0', },
                zgsyList: { gongzi:'1800',jfjs:'4433',dwyj:'31.03',jmgz:'0', gryj:'0',bjhj:'31.03',zdj:'0',lixi:'0', },
                gwyList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                njList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                txList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
              },
              {
                zhengjian:'350581199201073019',name:'蔡荣茂',xueli:'本科',shenfen:'108-外来工',money:'1241.71',
                dwTotal:'872.55',grTotal:'369.16',year:'2024-12',ssStartTime:'2024-12-01 ',ssEndTime:'2024-12-31 ',
                czList: { gongzi:'2030',jfjs:'3300',dwyj:'528',jmgz:'0', gryj:'264',bjhj:'792',zdj:'0',lixi:'0', },
                jgList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                syList: { gongzi:'2030',jfjs:'3300',dwyj:'16.5',jmgz:'0', gryj:'16.5',bjhj:'33',zdj:'0',lixi:'0', },
                gsList: { gongzi:'2030',jfjs:'4433',dwyj:'8.87',jmgz:'0', gryj:'8.87',bjhj:'0',zdj:'0',lixi:'0', },
                zgylList: { gongzi:'2030',jfjs:'4433',dwyj:'288.15',jmgz:'0', gryj:'88.66',bjhj:'376.81',zdj:'0',lixi:'0', },
                zgsyList: { gongzi:'2030',jfjs:'4433',dwyj:'31.03',jmgz:'0', gryj:'0',bjhj:'31.03',zdj:'0',lixi:'0', },
                gwyList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                njList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
                txList: { gongzi:'0',jfjs:'0',dwyj:'0',jmgz:'0', gryj:'0',bjhj:'0',zdj:'0',lixi:'0', },
              },
          ]
          this.loading = false
      },
      // 取消按钮
      cancel() {
          this.open = false;
          this.reset();
      },
      // 表单重置
      reset() {
          this.form = {
              id: null,
              userId: null,
              avatar: null,
              name: null,
              birthDate: null,
              idNum: null,
              phone: null,
              email: null,
              remark: null,
              companyName: null,
              companyAddress: null,
              updateTime: null,
              createTime: null,
              address: null
          };
          this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
          this.ids = selection.map(item => item.id)
          this.single = selection.length !== 1
          this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加客户单位管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
          this.reset();
          this.form = {...row}
          this.open = true;
          this.title = "修改客户单位管理";
      },
      /** 提交按钮 */
      submitForm() {
          this.$refs["form"].validate(valid => {
              if (valid) {
                  if (this.form.id != null) {
                      updateCommunicateBook(this.form).then(response => {
                          this.$modal.msgSuccess("修改成功");
                          this.open = false;
                          this.getList();
                      });
                  } else {
                      addCommunicateBook(this.form).then(response => {
                          this.$modal.msgSuccess("新增成功");
                          this.open = false;
                          this.getList();
                      });
                  }
              }
          });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
          const ids = row.id || this.ids;
          this.$modal.confirm('是否确认删除该数据项？').then(function () {
              return delCommunicateBook(ids);
          }).then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
          }).catch(() => {
          });
      },
      /** 导出按钮操作 */
      handleExport() {
          this.download('oa/communicateBook/export', {
              ...this.queryParams
          }, `communicateBook_${new Date().getTime()}.xlsx`)
      }
  }
};
</script>
